<template>
  <div style="width: 100%; height: 100%; position: relative">
    <main>大屏页面</main>
    <h1>{{ dateStore.nowDate }}</h1>
    <p>{{ countStore.num }}</p>
    <p>{{ countStore.msg }}</p>
    <button @click="resetNum">reset</button>
    <br />
    <button @click="addNum">+1</button>
    <div>{{ vm.info }}</div>
    <button @click="changeN">改变name</button>
    <h1 @click="goto2">跳转到大屏模板2（不推荐）</h1>
    <div
      class="mapChart"
      ref="sgmapRef"
      v-dyx-special-map-resize.--bigscreen-bg-scale.width:900.height:600="resizeMap"
    >
      <!-- <MyMap ref="ddd" /> -->
      <MyMapBaidu ref="ddd" />
    </div>
    <!-- <div class="mapbarChart">
      <MyMap1 />
    </div> -->
  </div>
</template>
<script setup>
import { onMounted, reactive, ref, watch } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
import userPiniaStore from "@/store/index.js";
// import MyMap from "@/components/sgMap/index.vue";
// import MyMap1 from "@/components/mychart/map.vue";
import MyMapBaidu from "@/components/baiduMap/index.vue";
// import MyMap1 from "@/components/barchart/index.vue";
const vm = reactive({
  info: {},
});
const ddd = ref(null);
const resizeMap = () => {
  ddd.value && ddd.value.mapResize();
};

// 如果不对 userPiniaStore 解构，就不用 pinia 中的 storeToRefs 方法保持绑定状态，而是自动就是绑定的。
let countStore = userPiniaStore.counts();
let dateStore = userPiniaStore.dateConfig();

const sgmapRef = ref(null);

const addNum = () => {
  countStore.num++;
  countStore.resetStore.age = countStore.num;
  vm.info = countStore.resetStore;
};
const resetNum = () => {
  // pinia 重置所有状态
  countStore.$reset();
  vm.info = countStore.resetStore;
};
const changeN = () => {
  countStore.changeName("CCC");
  countStore.changeNum("ll");
};
const goto2 = () => {
  router.push({
    path: "/about",
  });
};
onMounted(() => {
  dateStore.getTimeNow();
  countStore.$subscribe((mutation, state) => {});
});
</script>
<style lang="scss" scoped>
// 思级地图等坐标偏移的大屏样式如下：
.mapChart {
  border: 10px solid #ccc;
  resize: both;
}
// echarts 等不需要坐标偏移的大屏样式如下：
.mapbarChart {
  width: 900px;
  height: 600px;
  border: 10px solid #ccc;
}
</style>
